<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="getSchools">网络请求全国高校相关数据</button>
        <ul>
            <li v-for="(item, index) in schoolList" :key="'school'+index">
                {{item.area}} · {{item.counts}}
            </li>
        </ul>
    </div>
</body>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            schoolList: []
        },
        methods: {
            // 第一种方法，直接使用 jQuery 来实现
            // getSchools(){
            //     // 使用 jQuery 来实现
            //     $.get("https://api.i-lynn.cn/college").then(res=>{
            //         // jQuery 请求返回的过程中，有一个自动将 json 转化成 js 对象的内置操作
            //         console.log(res)
            //         this.schoolList = res.data.list
            //     })
            // }
            // 第二种方法，使用 jQuery async + await 异步请求的方式来实现我们想要的逻辑
            // 正常企业开发过程中，我们都是这样写的
            // async getSchools(){
            //     let res = await $.get("https://api.i-lynn.cn/college")
            //     this.schoolList = res.data.list
            // }
            // 第三种方法，使用 html5 提供的 原生 api 实现我们想要的结果
            async getSchools() {
                // 使用 fetch 一定要注意 第一次返回的是一个 promise 对象，是对请求进行验证，同时要配置 其参数 json 格式
                // fetch("https://api.i-lynn.cn/college").then(res => {
                //     console.log(res)
                //     return res.json()
                // }).then(data => {
                //     // 第二次请求也是一个 promise 对象，才是我们请求的真正的数据
                //     console.log(data.data.list)
                //     this.schoolList = data.data.list
                // })
                // html fetch 需要发送两次请求，这个设计有点反人类，所以最新的更新 应该默认可以取消了
                let res = await fetch("https://api.i-lynn.cn/college")
                console.log(res);
                // let data = await res.json()
                // console.log(data);
                // this.schoolList = data.data.list
            }
        },
    })
</script>

</html>